<template>
    <div class="login">
        <el-card class="card">
            <template #header>
                <h3>修改密码</h3>
            </template>
            <!-- 表单 
                :rules="rules" 表单的校验规则
                :model="user" 用于封装表单项中的数据（对象）
                ref="loginForm" ： 如果需要表单的统计校验，需要ref得到表单组件对象
            -->
            <el-form :rules="rules" ref="updatePasswordForm" :model="password" label-width="auto">
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input v-model="password.oldPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="password.newPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认新密码" prop="newPasswordConfirm">
                    <el-input v-model="password.newPasswordConfirm" type="password" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updatePassword" class="btn">确认修改</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { updatePasswordAPI } from "@/api/user";
import { ElMessage } from "element-plus";
export default {
    data() {
        return {
            password: {
                account: '',
                oldPassword: '',
                newPassword: '',
                newPasswordConfirm: ''
            },
            rules: {
                oldPassword: { required: true, message: "请输入旧密码", trigger: "blur" },
                newPassword: { required: true, message: "请输入新密码", trigger: "blur" },
                newPasswordConfirm: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.password.newPassword) {
                                callback(new Error('两次输入的密码不一致！'))
                            }
                            callback()
                        }, trigger: 'blur'
                    }
                ]
            },
        };
    },
    methods: {
        updatePassword() {
            this.$refs.updatePasswordForm.validate((val) => {
                if (val) {
                    this.password.account = JSON.parse(sessionStorage.getItem('user')).account;
                    updatePasswordAPI(this.password).then((resp) => {
                        if (resp.data.code == 2000) {
                            ElMessage.success(resp.data.message);
                            this.$router.push('/');
                        } else {
                            ElMessage.error(resp.data.message);
                        }
                    })
                }
            });
        },
    },
};
</script>

<style scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.login .card {
    width: 400px;
    opacity: 0.95;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .login {
        background-position: center;
    }

    .login .card {
        width: 95vw;
        max-width: 400px;
    }

    .btn {
        position: absolute;
        right: 0;
        top: 0;
    }
}
</style>
